<template>
  <div v-if="nowvisible">
    <div class="bread-box but20">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="goBack">门店建设跟进</el-breadcrumb-item>
        <el-breadcrumb-item> 详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div>
    <div>
      <div class="mt20">
        <div class="qup-title-box">
          <span class="border" /><span>门店建设整体跟进详情</span>
        </div>
        <el-form :model="formData" size="mini" label-width="120px">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="详情" name="detailForm" :disabled="isCheckDetail">
              <detail-form :detail-data="activatedData" @checkOtherDetail="disabledTabs" />
            </el-tab-pane>
            <el-tab-pane label="图纸信息" name="PictureInfoTable" :disabled="isCheckDetail">
              <picture-info-table :detail-data="activatedData" @checkOtherDetail="disabledTabs" />
            </el-tab-pane>
            <el-tab-pane label="门店区域及系列" name="AreaSeriesTable" :disabled="isCheckDetail">
              <area-series-table :detail-data="activatedData" />
            </el-tab-pane>
            <el-tab-pane label="门店返利详情" name="ShopRebate" :disabled="isCheckDetail">
              <shop-rebate :detail-data="activatedData" />
            </el-tab-pane>
            <!-- <el-tab-pane label="附件管理" name="FileController">
              <file-controller :detail-data="activatedData" />
            </el-tab-pane> -->
          </el-tabs>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import AreaSeriesTable from './component/areaSeriesTable.vue'
import detailForm from './component/detailForm.vue'
// import FileController from './component/fileController.vue'
import PictureInfoTable from './component/pictureInfoTable.vue'
import ShopRebate from './component/shopRebate.vue'

export default {
  name: 'Details',
  components: { detailForm, PictureInfoTable, AreaSeriesTable, ShopRebate },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      isCheckDetail: false,
      activeName: 'detailForm',
      activatedData: {}
    }
  },
  computed: {
    nowvisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },

  created() {
    this.activatedData = JSON.parse(JSON.stringify(this.detailData))
  },
  methods: {
    goBack() {
      this.visible = false
      this.nowvisible = false
      this.$emit('goBack')
    },
    disabledTabs(value) {
      this.isCheckDetail = value
    }
  }
}
</script>
<style lang='scss' scoped>
  /deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
.subdaoch{margin: 10px 0;}
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner,.btn-green{
    color: #3DC094;
}
.qup-title-box{background: #f2f2f2; line-height: 30px;}
.spancla{
  color: #3DC094;
    font-weight: 400;
    float: right;
    margin-right: 10px;
}
</style>

